<template>
  <div class="input box-shadow">
    <bill-board>
      <div class="list">
        <div class="empty" v-show="!cart.length">
        <div class="img-wrapper">
          <img src="../../assets/imgs/no-data.png" alt="">
        </div>
         <span class="text">
            投注区，请选择号码！
         </span>
        </div>
        <order-list :title="title" :width="width" v-show="cart.length"></order-list>
      </div>
    </bill-board>
  </div>
</template>

<script>
import OrderList from '@/components/order-list/order-list'
import BillBoard from '@/components/base/bill-board/bill-board'
import { mapGetters } from 'vuex'

export default {
  components: {
   OrderList,
   BillBoard 
  },
  data() {
    return {
      top: 0,
      width: [140, 140, 100, 100, 100, 120],
      title: [
        {
          id: 1,
          name: '玩法',
        },
        {
          id: 2,
          name: '购买内容',
        },
        {
          id: 3,
          name: '返点'
        },
        {
          id: 4,
          name: '单注金额'
        },
        {
          id: 5,
          name: '购买金额'
        },
        {
          id: 6,
          name: '最高奖金'
        }
      ],
      
    }
  },
  mounted() {
   
  },
  methods: {
    handleScroll() {
      this.top = this.table.scrollTop
    }
  },
  computed: {
    ...mapGetters('lottery', {
      cart: 'getCurrentCart'
    })
  }
}

</script>
<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .input >>> .bg-bar 
    width 101%
  .input
    position relative
    width 760px
    height 100%
    background-color #fafaf8
    text-align center
    z-index 1
    .list 
      height 170px 
      .empty 
        width 100%
        height 170px 
        display flex 
        flex-direction column 
        align-items center 
        justify-content center 
        background $color-text-button
        .img-wrapper 
          width 160px 
        .text 
          color $color-sub-grey
          
        // padding-top 80px
</style>
